<a href='https://github.com/angular/angular.js/edit/v1.6.x/src/ngComponentRouter/Router.js?message=docs(ngComponentRouter)%3A%20describe%20your%20change...#L1' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>


<h1>
  <code>ngComponentRouter</code>
</h1>


<div class="alert alert-danger deprecation">
  <div class="title"><strong>Deprecated:</strong>
    
    
  </div>
  <p>In an effort to keep synchronized with router changes in Angular 2, this implementation of the
Component Router (ngComponentRouter module) has been deprecated and will not receive further updates.</p>
<p>We are investigating backporting the Angular 2 Router to Angular 1, but alternatively, use the
<a href="api/ngRoute"><code>ngRoute</code></a> module or community developed projects (e.g. <a href="https://github.com/angular-ui/ui-router">ui-router</a>).</p>

</div>


<h2>Installation</h2>

  <p>Currently, the <strong>Component Router</strong> module must be installed via <code>npm</code>/<code>yarn</code>, it is not available
on Bower or the Google CDN.</p>
<pre><code class="lang-bash">yarn add @angular/router@0.2.0
</code></pre>
<p>Include <code>angular_1_router.js</code> in your HTML:</p>
<pre><code class="lang-html">&lt;script src=&quot;/node_modules/@angular/router/angular1/angular_1_router.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>You also need to include ES6 shims for browsers that do not support ES6 code (Internet Explorer,
 iOs &lt; 8, Android &lt; 5.0, Windows Mobile &lt; 10):</p>
<pre><code class="lang-html">&lt;!-- IE required polyfills, in this exact order --&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>Then load the module in your application by adding it as a dependent module:</p>
<pre><code class="lang-js">angular.module(&#39;app&#39;, [&#39;ngComponentRouter&#39;]);
</code></pre>









<div class="component-breakdown">
  <h2>Module Components</h2>
  
  <div>
    <h3 class="component-heading" id="type">Type</h3>
    <table class="definition-table">
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      
      <tr>
        <td><a href="api/ngComponentRouter/type/Router">Router</a></td>
        <td><p>A <code>Router</code> is responsible for mapping URLs to components.</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngComponentRouter/type/ChildRouter">ChildRouter</a></td>
        <td><p>This type extends the <a href="api/ngComponentRouter/type/Router"><code>Router</code></a>.</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngComponentRouter/type/RootRouter">RootRouter</a></td>
        <td><p>This type extends the <a href="api/ngComponentRouter/type/Router"><code>Router</code></a>.</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngComponentRouter/type/ComponentInstruction">ComponentInstruction</a></td>
        <td><p>A <code>ComponentInstruction</code> represents the route state for a single component. An <code>Instruction</code> is
composed of a tree of these <code>ComponentInstruction</code>s.</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngComponentRouter/type/RouteDefinition">RouteDefinition</a></td>
        <td><p>Each item in the <strong>RouteConfig</strong> for a <strong>Routing Component</strong> is an instance of
this type. It can have the following properties:</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngComponentRouter/type/RouteParams">RouteParams</a></td>
        <td><p>A map of parameters for a given route, passed as part of the <a href="api/ngComponentRouter/type/ComponentInstruction"><code>ComponentInstruction</code></a> to
the Lifecycle Hooks, such as <code>$routerOnActivate</code> and <code>$routerOnDeactivate</code>.</p>
</td>
      </tr>
      
    </table>
  </div>
  
  <div>
    <h3 class="component-heading" id="directive">Directive</h3>
    <table class="definition-table">
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      
      <tr>
        <td><a href="api/ngComponentRouter/directive/ngOutlet">ngOutlet</a></td>
        <td><p>The directive that identifies where the <a href="api/ngComponentRouter/type/Router"><code>Router</code></a> should render its <strong>Components</strong>.</p>
</td>
      </tr>
      
    </table>
  </div>
  
  <div>
    <h3 class="component-heading" id="service">Service</h3>
    <table class="definition-table">
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      
      <tr>
        <td><a href="api/ngComponentRouter/service/$rootRouter">$rootRouter</a></td>
        <td><p>The singleton instance of the <a href="api/ngComponentRouter/type/RootRouter"><code>RootRouter</code></a> type, which is associated
with the top level <a href="api/ngComponentRouter/service/$routerRootComponent"><code>$routerRootComponent</code></a>.</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngComponentRouter/service/$routerRootComponent">$routerRootComponent</a></td>
        <td><p>The top level <strong>Routing Component</strong> associated with the <a href="api/ngComponentRouter/service/$rootRouter"><code>$rootRouter</code></a>.</p>
</td>
      </tr>
      
    </table>
  </div>
  
</div>





